import styles from './index.module.less'
import { omit } from 'lodash-es'
import { useState } from 'react'
import cm from 'classnames'

const Index = (props) => {
  const { height = '3rem', hasSuffix, suffix, className, textarea, onChange, inputClass } = props
  const [type, setType] = useState(hasSuffix ? 'password' : 'text')

  if (textarea) {
    return (
      <textarea
        className={cm(styles.textarea, className)}
        onInput={(e) => onChange(e)}
        {...omit(props, ['height', 'hasSuffix', 'suffix', 'textarea', 'inputClass'])}
      ></textarea>
    )
  }
  return (
    <div className={cm(styles.inputBox, className)} style={{ height }}>
      <input
        className={cm(styles.input, inputClass)}
        type={type}
        maxLength={100}
        onInput={(e) => onChange(e)}
        {...omit(props, ['height', 'hasSuffix', 'className', 'suffix', 'textarea', 'inputClass'])}
      />
      {hasSuffix ? (
        type === 'text' ? (
          <img src="/images/hide.png" className={styles.suffixImg} onClick={() => setType('password')} />
        ) : (
          <img src="/images/show.png" className={styles.suffixImg} onClick={() => setType('text')} />
        )
      ) : null}
      {suffix}
    </div>
  )
}

export default Index
